<!-- 搜索页面组件 -->
<template>
	<view class="m-hmsrch">
		<u-search v-model="value" focus bg-color="#ebecec" margin="15px 10px" :show-action="false" shape="round" placeholder="搜索歌曲、歌手、专辑" @search="record"></u-search>
		<view v-show="!issueless">
			<view v-show="!value" class="m-default">
				<!-- 热门搜索 -->
				<section class="m-hotlist">
					<h3 class="title">热门搜索</h3>
					<ul class="list">
						<li class="item f-bd f-bd-full" v-for="(item, index) in hotArr" :key="index">
							<span class="link" @click="record(item.first)">{{ item.first }}</span>
						</li>
					</ul>
				</section>
				<!-- 搜索记录 -->
				<section style="background: #fff">
					<u-cell-group>
						<u-cell :title="i" icon="clock" v-for="(i, index) in searecHistory" :key="index" @click="delline(false, i)">
							<u-icon slot="right-icon" name="close" class="search-icon" @click.native.stop="delline(true, i)"></u-icon>
						</u-cell>
					</u-cell-group>
				</section>
			</view>
			<!-- 查询显示相关歌曲 -->
			<section v-show="value && !isFit" class="m-recom">
				<h3 class="title f-bd f-bd-btm f-thide" @click="record(value)">搜索“{{ value }}”</h3>
				<!-- 搜索内容相关显示 -->
				<ul v-show="!descrip">
					<li class="recomitem" v-for="(items, index) in suggeation" :key="index" @click="record(items.keyword)">
						<i class="u-svg u-svg-search"></i>
						<span class="f-bd f-bd-btm f-thide">{{ items.keyword }}</span>
					</li>
				</ul>
			</section>
			<!-- 最佳匹配显示 -->
			<view v-show="value && isFit" class="m-searchresult">
				<u-list @scrolltolower="scrolltolower">
					<section class="m-matchlist">
						<h3 class="title">最佳匹配</h3>
						<ul>
							<!-- 歌手 -->
							<li class="matchitem album" v-if="multimatch.artist" @click="gotoInfo('/pages/SingerDetails?id=' + multimatch.artist[0].id)">
								<album-view :album="multimatch.artist" :type="0" :values="value"></album-view>
							</li>
							<!-- 专辑 -->
							<li class="matchitem artist" v-if="multimatch.album" @click="gotoInfo(`/pages/AlbumArt?id=${multimatch.album[0].id}`)">
								<album-view :album="multimatch.album" :type="1" :values="value"></album-view>
							</li>
							<!-- 歌单 -->
							<li class="matchitem artist" v-if="multimatch.playlist" @click="gotoInfo(`/pages/SongList?id=${multimatch.playlist[0].id}`)">
								<album-view :album="multimatch.playlist" :type="2" :values="value"></album-view>
							</li>
						</ul>
					</section>
					<section>
						<u-list-item v-for="item in songsList" :key="item.id">
							<search-songs-list :songsObj="item" :values="value"></search-songs-list>
						</u-list-item>
						<u-loadmore :status="status" />
					</section>
				</u-list>
			</view>
		</view>
		<!-- 搜索结果为空 -->
		<view v-show="issueless" class="m-searchresult">
			<view class="m-noresult">暂无搜索结果</view>
		</view>
	</view>
</template>

<script>
import { hotSearchAPI, multimatchAPI, searchResultListAPI, suggeationsAPI } from '@/api';
import AlbumView from './AlbumView.vue';
import SearchSongsList from './SearchSongsList.vue';
import value from '../uni_modules/uview-ui/components/u-text/value';
export default {
	components: {
		AlbumView,
		SearchSongsList
	},
	data() {
		return {
			value: '', // 搜索内容
			hotArr: [], // 热搜推荐
			searecHistory: [], // 搜索记录
			isFit: false, //最佳匹配显示与隐藏
			songsList: [], //搜索结果的歌曲列表
			suggeation: [], //搜索建议
			multimatch: [], //多重匹配
			descrip: false, //加载中状态显示
			issueless: false, //没有结果显示

			offset: 0, // 数据偏移量
			status: 'loadmore'
		};
	},
	watch: {
		value(newval, oldval) {
			let arr = [];
			this.hotArr.forEach((item) => {
				arr.push(item.first);
			});
			arr = [...arr, ...this.searecHistory];
			let newList = Array.from(new Set(arr));
			// 包含 直接跳过
			if (newList.includes(newval)) {
				if (oldval.length === 0) {
					return;
				}
				if (newval.length - oldval.length == 1 || newval.length - oldval.length == -1) {
					this.fit();
				}
			} else {
				this.fit();
			}
		}
	},
	created() {
		//获取推荐关键字
		hotSearchAPI().then((res) => {
			this.hotArr = res.result.hots;
		});
	},
	mounted() {
		this.searec();
	},
	methods: {
		//本地储存地址
		searec() {
			if (!uni.getStorageSync('searecList')) {
				uni.setStorageSync('searecList', '[]');
			} else {
				this.searecHistory = JSON.parse(uni.getStorageSync('searecList'));
			}
		},
		suggeations() {
			suggeationsAPI(this.value).then((res) => {
				this.suggeation = res.result.allMatch;
			});
		},
		//回车记录搜索内容
		record(val) {
			//去除文字的空格
			val = val.replace(/\s/g, '');
			// 空字符串不执行搜索方法
			if (!val) {
				this.issueless = true;
				return;
			} else {
				this.issueless = false;
			}
			//显示最佳匹配
			this.isFit = true;
			//搜索结果
			this.offset = 0;
			searchResultListAPI({
				keywords: val,
				offset: 0
			}).then((res) => {
				this.songsList = res.result.songs;
			});
			//搜索多重匹配
			multimatchAPI({
				keywords: val
			}).then((res) => {
				this.multimatch = res.result;
			});
			//记录搜索内容
			this.value = val;
			this.searecHistory.unshift(val || this.value);
			let historyArr = new Set(this.searecHistory);
			uni.setStorageSync('searecList', JSON.stringify(Array.from(historyArr)));
			this.searec();
		},
		// 点击删除记录事件
		delline(type, name) {
			if (type === true) {
				let fil = this.searecHistory.filter((item) => {
					return item != name;
				});
				this.searecHistory = fil;
				uni.setStorageSync('searecList', JSON.stringify(fil));
				this.searecHistory = JSON.parse(uni.getStorageSync('searecList'));
			} else {
				// 点击记录实现搜索/置顶
				this.value = name;
				this.isFit = true;
				this.record(name);
			}
		},
		//输入框变化
		fit() {
			this.isFit = false;
			this.issueless = false;
			if (!this.value.replace(/\s/g, '')) {
				this.descrip = true;
			} else {
				this.descrip = false;
				this.suggeations();
			}
		},
		// 触底加载
		scrolltolower() {
			this.offset += 30;
			this.status = 'loading';
			let data = {
				keywords: this.value,
				offset: this.offset
			};
			// 发送http请求,获取当前类别下的下一页数据,更新列表
			searchResultListAPI(data).then((res) => {
				if (this.offset >= res.result.songCount) {
					// 数据全部加载完成
					this.status = 'nomore';
				} else {
					this.songsList = [...this.songsList, ...res.result.songs];
					// 加载状态结束
					this.status = 'loadmore';
				}
			});
		},
		gotoInfo(url) {
			uni.navigateTo({
				url
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.m-hmsrch {
	background: #fbfcfd;
	border-top: 1px solid #ccc;

	.m-default {
		border-top: 1px solid rgba(0, 0, 0, 0.1);

		.m-hotlist {
			padding: 15px 10px 0;

			.title {
				font-size: 12px;
				line-height: 12px;
				color: #666;
				font-weight: 400;
				margin: 0;
			}

			.list {
				margin: 10px 0 7px;
				position: relative;

				& > li {
					list-style: none;
				}

				.link {
					color: #333;
				}

				.f-bd:after {
					width: 200%;
					height: 200%;
					transform: scale(0.5);
					position: absolute;
					z-index: 2;
					content: '';
					top: 0;
					left: 0;
					pointer-events: none;
					box-sizing: border-box;
					transform-origin: top left;
					border: 0 solid rgba(0, 0, 0, 0.1);
				}

				.item {
					display: inline-block;
					height: 32px;
					margin: 0 8px 8px 0;
					padding: 0 14px;
					font-size: 14px;
					line-height: 32px;
					border: 1px solid #d3d4da;
					border-radius: 32px;
				}
			}
		}
	}

	.m-recom {
		margin: 0 auto;
		border-top: 1px solid rgba(0, 0, 0, 0.1);

		h3 {
			margin: 0;
		}

		.title {
			height: 50px;
			margin-left: 10px;
			padding-right: 10px;
			font-size: 15px;
			line-height: 50px;
			color: #507daf;
			border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		}

		.recomitem {
			display: flex;
			align-items: center;
			height: 45px;
			padding-left: 10px;
		}

		i {
			flex: 0 0 auto;
			margin-right: 7px;
		}

		span {
			display: inline-block;
			flex: 1;
			width: 1%;
			padding-right: 10px;
			font-size: 15px;
			line-height: 45px;
			color: #333;
			border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		}

		span:after {
			border-color: rgba(0, 0, 0, 0.1);
		}
	}
}

.m-searchresult {
	background: #fcfcfd;
}

.m-noresult {
	padding: 20px 0;
	text-align: center;
}

.f-bd {
	position: relative;
}

.f-thide {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	word-break: normal;
}

.u-svg-search {
	width: 15px;
	height: 15px;
	background-image: url('');
}

.u-svg {
	display: inline-block;
	vertical-align: middle;
	background-position: 0 0;
	background-size: contain;
	background-repeat: no-repeat;
}

.m-searchresult {
	background: #fcfcfd;
	border-top: 1px solid rgba(0, 0, 0, 0.1);

	.m-matchlist {
		padding: 8px 0 4px;

		h3 {
			margin: 0;
		}

		.title {
			margin-left: 10px;
			font-size: 12px;
			line-height: 16px;
			color: #666;
		}

		.matchitem {
			position: relative;
			height: 66px;
		}
	}
}
</style>
